//Tip表一个弹出提示 类 ，JS怎么实现类==>function
function Tip(conf){
    // this就表示由Tip产生的提示框本身
    this.ele = document.createElement("div");

    // 显示提示框
    this.show = function(){
        var e = this.ele;
        e.innerHTML = conf.text;
        e.className = "tip";

        e.style.left = conf.left;
        e.style.top = conf.top;

        var small = document.createElement("div");
        small.className = "small"

        e.appendChild(small);
        document.body.appendChild(e);

        setTimeout(function(){
            e.style.opacity = 1;
        },0);
    };

    // 隐藏提示框
    this.hide = function(){
        var e = this.ele;
        //e.style.opacity = 0;

        // setTimeout(function(){
        document.body.removeChild(e);
        // },300);
    };
}

//为所有标签添加方法，名为showTip
//调用该方法时，需要传递tip的文字，该方法
//会为这个元素创建一个tip对象（基于上面的Tip类）
//在这个元素的右方出现或隐藏这个tip,在鼠标放到或离开该元素时
HTMLElement.prototype.showTip = function(text){
    var left1 = this.offsetLeft + 36 + 10; //18
    var top1 = this.offsetTop + 36/2 - 23/2 //40

    var tip = new Tip({
        text:text,
        left:left1+"px",
        top:top1+"px"
    });

    this.onmouseover = function(){
        tip.show();
    };

    this.onmouseout = function(){
        tip.hide();
    };
};
